/**
 * 全局样式入口 - 优化版
 */

@import './variables.scss';
@import './reset.scss';

// ========== 布局工具类 ==========
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

// ========== 文本工具类 ==========
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: $text-primary;
}

.text-secondary {
  color: $text-secondary;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-danger {
  color: $danger-color;
}

.font-bold {
  font-weight: $font-weight-bold;
}

.font-semibold {
  font-weight: $font-weight-semibold;
}

.font-medium {
  font-weight: $font-weight-medium;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

// ========== 间距工具类 ==========
@each $key,
  $value
    in (
      xs: $spacing-xs,
      sm: $spacing-sm,
      md: $spacing-md,
      lg: $spacing-lg,
      xl: $spacing-xl,
      2xl: $spacing-2xl,
      3xl: $spacing-3xl
    )
{
  .m-#{$key} {
    margin: $value;
  }
  .mt-#{$key} {
    margin-top: $value;
  }
  .mr-#{$key} {
    margin-right: $value;
  }
  .mb-#{$key} {
    margin-bottom: $value;
  }
  .ml-#{$key} {
    margin-left: $value;
  }
  .mx-#{$key} {
    margin-left: $value;
    margin-right: $value;
  }
  .my-#{$key} {
    margin-top: $value;
    margin-bottom: $value;
  }
  .p-#{$key} {
    padding: $value;
  }
  .pt-#{$key} {
    padding-top: $value;
  }
  .pr-#{$key} {
    padding-right: $value;
  }
  .pb-#{$key} {
    padding-bottom: $value;
  }
  .pl-#{$key} {
    padding-left: $value;
  }
  .px-#{$key} {
    padding-left: $value;
    padding-right: $value;
  }
  .py-#{$key} {
    padding-top: $value;
    padding-bottom: $value;
  }
}

// ========== 圆角工具类 ==========
.rounded-xs {
  border-radius: $border-radius-xs;
}
.rounded-sm {
  border-radius: $border-radius-sm;
}
.rounded {
  border-radius: $border-radius-md;
}
.rounded-lg {
  border-radius: $border-radius-lg;
}
.rounded-xl {
  border-radius: $border-radius-xl;
}
.rounded-2xl {
  border-radius: $border-radius-2xl;
}
.rounded-full {
  border-radius: $border-radius-full;
}

// ========== 阴影工具类 ==========
.shadow-xs {
  box-shadow: $shadow-xs;
}
.shadow-sm {
  box-shadow: $shadow-sm;
}
.shadow {
  box-shadow: $shadow-md;
}
.shadow-lg {
  box-shadow: $shadow-lg;
}
.shadow-xl {
  box-shadow: $shadow-xl;
}
.shadow-2xl {
  box-shadow: $shadow-2xl;
}
.shadow-none {
  box-shadow: none;
}

// ========== 通用卡片样式优化 ==========
.el-card {
  border-radius: $border-radius-lg;
  box-shadow: $shadow-sm;
  transition: $transition-base;
  border: 1px solid $border-color-light;

  &:hover {
    box-shadow: $shadow-md;
  }

  .el-card__header {
    border-bottom: 1px solid $border-color-light;
    padding: $spacing-lg;
  }

  .el-card__body {
    padding: $spacing-lg;
  }
}

// ========== 页面容器统一样式 ==========
.page-container {
  padding: $spacing-lg;
  min-height: calc(100vh - #{$header-height});

  .page-header {
    margin-bottom: $spacing-lg;
    padding: $spacing-lg;
    background: $bg-primary;
    border-radius: $border-radius-lg;
    box-shadow: $shadow-sm;

    .page-title {
      font-size: $font-size-2xl;
      font-weight: $font-weight-bold;
      color: $text-primary;
      margin: 0 0 $spacing-sm 0;
    }

    .page-description {
      font-size: $font-size-base;
      color: $text-secondary;
      margin: 0;
    }
  }

  .page-content {
    background: $bg-primary;
    border-radius: $border-radius-lg;
    padding: $spacing-lg;
    box-shadow: $shadow-sm;
  }
}

// ========== 按钮增强样式 ==========
.el-button {
  border-radius: $border-radius-md;
  font-weight: $font-weight-medium;
  transition: $transition-base;

  &.el-button--primary {
    background: $gradient-primary;
    border: none;

    &:hover {
      box-shadow: $shadow-primary;
      transform: translateY(-2px);
    }
  }

  &.el-button--success {
    background: $gradient-primary;
    border: none;
  }

  &.el-button--warning {
    background: $gradient-warm;
    border: none;
  }

  &.el-button--info {
    background: $gradient-secondary;
    border: none;
  }
}

// ========== 输入框优化 ==========
.el-input {
  .el-input__wrapper {
    border-radius: $border-radius-md;
    box-shadow: $shadow-xs;
    transition: $transition-base;

    &:hover {
      box-shadow: $shadow-sm;
    }

    &.is-focus {
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
  }
}

// ========== 表格优化 ==========
.el-table {
  border-radius: $border-radius-lg;
  overflow: hidden;

  .el-table__header-wrapper {
    th {
      background: $bg-tertiary;
      color: $text-primary;
      font-weight: $font-weight-semibold;
    }
  }

  .el-table__body-wrapper {
    tr:hover > td {
      background: $bg-secondary;
    }
  }
}

// ========== 标签优化 ==========
.el-tag {
  border-radius: $border-radius-full;
  font-weight: $font-weight-medium;
  border: none;
}

// ========== 加载动画 ==========
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

// ========== 渐变背景工具类 ==========
.bg-gradient-primary {
  background: $gradient-primary;
}

.bg-gradient-secondary {
  background: $gradient-secondary;
}

.bg-gradient-warm {
  background: $gradient-warm;
}

.bg-gradient-purple {
  background: $gradient-purple;
}

.bg-gradient-ocean {
  background: $gradient-ocean;
}

// ========== 玻璃态效果 ==========
.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-effect-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
